<template>
	<view v-if="showFlag" class="corderDetail-box">
		<!-- <view class="" >
			<title :center="false" @titleHeight='setPaddingTop' title="订单详情" iconSize="38" bgcolor="transparent" color="#666" icon="/static/img/other/zuojiantou2.png"
			 :bold="false" :iconSize="45" @toclick="toBack(1)"></title>
		</view> -->
		
		<order-block1 v-if="orderInfo.orderJson.status == 5" :orderInfo="orderInfo"></order-block1>
		<view class="orderDetail" v-else>
			<title :center="false" @titleHeight='setPaddingTop' title="订单详情" iconSize="38" :bgcolor="titleSty.bgColor" :color="titleSty.color"
				:icon="titleSty.icon" :bold="false" :iconSize="45" @toclick="toBack(1)"></title>
			<img class='bg-img' src="../static/bg.png" alt="">
			
			<view v-if="height" class="" style="padding-bottom: 40rpx;">
				<view class="block-2 mh20" :style="{'margin-top': height + 'px'}">
					<view class="flex-start align-start">
						<img class='img' :src="orderInfo.orderJson.img" alt="">
						<view class="flex-one">
							<view class="flex-between align-center mb10">
								<text class="f36 fontw bold no-warp-one"
									style="color: rgba(46, 46, 46, 1);">{{orderInfo.orderJson.mn}}</text>
								<text class="f22 "
									style="color: rgba(102, 102, 102, 1);min-width: fit-content;">共{{orderInfo.orderJson.count}}张</text>
							</view>
							<view class="twoline f24 flex-start align-center medium mb10"
								style="color: rgba(102, 102, 102, 1);">
								<text>{{orderInfo.orderJson.show_time || ''| getWeekByDay}}</text>
								<text>{{orderInfo.orderJson.show_time || '' | formateDate('MM-DD')}}</text>
								<text>
									{{orderInfo.orderJson.show_time || '' | formateDate('HH:mm')}}~{{orderInfo.orderJson.show_time || '' | endTime(orderInfo.orderJson.dur)}}
								</text>
								<text v-if="orderInfo.orderJson.tp">{{orderInfo.orderJson.tp}}</text>
							</view>
				
							<view class="medium f24" style="color: rgba(34, 34, 34, 1);">
								<text class="mr10"> {{orderInfo.orderJson.hn}}</text>
								{{ !orderInfo.orderJson.trading_seat_string?orderInfo.orderJson.seat:orderInfo.orderJson.trading_seat_string | shufilter(',', ' ', true)}}
							</view>
						</view>
					</view>
					<view class="bottom  mt30">
						<img class='img2' src="../static/od-2.png" />
						<view class="con " @click="map_tiao">
							<view class="flex-start align-center">
								<image class="mr10" src="../static/location.png" style='width: 24rpx;height: 24rpx;'
									alt="" />
								<div style='color:#333333;' class='f24'>
									<text class="mr10 ">{{orderInfo.orderJson.cname}}</text>
									<text>{{orderInfo.orderJson.cn}}</text>
								</div>
							</view>
							<view class="f20" style="color: #666666;">
								<text>{{orderInfo.orderJson.addr}}</text>
							</view>
						</view>
					</view>
					<view class="refundTip">
						<view class="tipTitle">
							退票
						</view>
						<view class="tipContent">
							如因您个人原因退票所产生的费用，将由您个人承担。
						</view>
					</view>
				</view>
				<!-- 详情头部 end -->
				<!-- 出票中 start -->
				<view class="grid col-1 bg-white pr" style="margin:20rpx;" v-if="orderInfo.orderJson.status==2||orderInfo.orderJson.status==0">
					<view class="text-center margin-tb-sm">
						<image class="loading-gif" src="../static/chupiaoloading.gif"></image>
					</view>
					<view class="text-gray text-center">出票时间15-60分钟，出票失败全额退款</view>
				</view>
				<!-- 出票中~~ end -->
				<block v-else >
					<view class="grid col-1 bg-white padding pr"
						v-if="orderInfo.orderJson.status===3&&orderInfo.orderJson.ticket.length===0">
						<view class="text-center margin-tb-sm">
							<image class="loading-gif" src="../static/chupiaoloading.gif"></image>
						</view>
						<view class="text-gray text-center">稍等片刻，平台正在为您更新订单~</view>
					</view>
					<block v-else>
						<!-- 二维码 -->
						<view class="bg-white padding-bottom-xs pr code-box" v-if="orderInfo.orderJson.status<5">
							<view class="code-top" :class="orderInfo.orderJson.status>=4 ? 'invalid-top':''">
								请用二维码或取票码取票
							</view>
							<view class="refundAndChange" :style="{'height': refundAndChangeIsShow?refundAndChangeHeight + 'px':'64rpx'}">
							<!-- <view class="refundAndChange"> -->
								<view class="refundAndChange-title" @tap="refundAndChangeIsShow = !refundAndChangeIsShow">
									<view class="left">
										<u-icon name="info-circle" color="#FF6010" size="24" style="margin-right: 12rpx;"></u-icon>
										如遇影院问题无法正常观影，请联系客服退款
									</view>
									<u-icon :name="refundAndChangeIsShow?'arrow-up':'arrow-down'" color="#666" size="24"></u-icon>
								</view>
								<view class="refundAndChange-content">
									如因影院问题（如影院设备故障，影院失火停电）等导致无法正常观影的订单不会自动退款！！！请及时致电
									<text style="color: #FF6010;" @tap="callPhone">13229877458</text>
									我们会在第一时间核实后为您办理退款，如您未能第一时间反馈，所产生的损失，完全由您个人承担。
								</view>
							</view>
							<!-- 二维码  start -->
							<code-swiper bgColor="white" :height="codeSwiper" :list="orderInfo.orderJson.ticket"
								:status="orderInfo.orderJson.status" @change='setSwiperHeight' class="code"></code-swiper>
							<!-- <view class="text-center text-gray">到取票机输入取票码或扫描二维码即可取票</view> -->
							<!-- 二维码 end -->
						</view>
						<!-- <empty bg="bg-white" bind:__l="__l" content="此订单已关闭" icon="icon-zanwudingdan" vueId="5c8819bc-3" v-else></empty> -->
						<view class="empty pr" v-else>
							<u-empty text="此订单已关闭" mode="list"></u-empty>
						</view>
					</block>
				</block>
				
				<view class="mh20 block-3">
					<view class="flex-between align-center ph20 one">
						<text class="f32 bold fontw">订单详情</text>
						<!-- <text class="bold fontw f32" style="color: #FF4345;">￥{{orderInfo.orderJson.price}}</text> -->
					</view>
					<view class="ph20">
						<view class="flex-between align-center mt20 f28 line">
							<text class="ques">实付金额：</text>
							<text class="ans">
								￥{{orderInfo.orderJson.price * orderInfo.orderJson.count | toFixed(2)}}
							</text>
						</view>
						<view class="flex-between align-center mt20 f28 line">
							<text class="ques">订单编号：</text>
							<text class="ans">{{orderInfo.orderJson.orderno}}</text>
						</view>
						<view class="flex-between align-center mt20 line">
							<text class="ques">下单时间：</text>
							<text
								class="ans">{{orderInfo.orderJson.created_at | formateDate('YYYY年MM月DD日 HH:mm:ss')}}</text>
						</view>
						<view class="flex-between align-center mt20 line">
							<text class="ques">订单金额：</text>
							<text
								class="ans">¥{{orderInfo.orderJson.count * orderInfo.orderJson.original_price | toFixed(2)}}</text>
						</view>
						<view class="flex-between align-center mt20 line" >
							<text class="ques">优惠金额：</text>
							<!-- 没有使用优惠券和电影卡 -->
							<text class="ans">¥{{discount | toFixed(2)}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import orderBlock1 from '@/subpages/orderDetail/order-block1.vue'
	import title from '@/pages/components/title.vue'
	import codeSwiper from '@/pages/components/code-swiper.vue'
	export default {
		data() {
			return {
				codeSwiper:500,
				codeSwiperList:[],
				showFlag: false,
				boxHeight: 0,
				height: 0,
				no: '',
				orderInfo: {},
				titleSty: {
					bgColor: 'none',
					color: '#000',
					icon: 'icon',
				},
				refundAndChangeIsShow: false,//退款提醒是否展示
				refundAndChangeHeight: 118,//退款提醒的高度。px
			}
		},
		computed: {
			discount() {
				if (this.orderInfo.orderJson) {
					return (this.orderInfo.orderJson.original_price * this.orderInfo.orderJson.count) - (this.orderInfo
						.orderJson.price * this.orderInfo.orderJson.count)
				}
				return 0
			},
		},
		onLoad(opstion) {
			this.opstion = opstion.no
		},
		onPageScroll(e){
			if (e.scrollTop > 30) {
				this.titleSty.bgColor = 'white'
			} else {
				this.titleSty.bgColor = 'none'
			
			}
			// console.log(e)
		},
		onShow() {
			uni.showLoading({
				title: '加载中'
			})
			this.getInfo()
		},
		methods: {
			//拨打客服电话
			callPhone(){
				uni.makePhoneCall({
					phoneNumber:'13229877458'
				})
			},
			setSwiperHeight(e){
				this.codeSwiper = this.codeSwiperList[e]
			},
			setCodeSwiper(){
				let list = this.orderInfo.orderJson.ticket
				this.codeSwiperList = list.map(item => {
					if(item.is_qr && item.is_qr !== 0){
						return 500
					}else{
						return 220
					}
				})
				this.codeSwiper = this.codeSwiperList[0]
			},
			setPaddingTop(data) {
				this.height = data.height
			},
			// 电影跳转
			map_tiao() {
				uni.navigateTo({
					url: `/subpages/location/location?cinemaid=${this.orderInfo.orderJson.cinemaid}`
				})
			},
			// 订单详情
			getInfo() {
				this.$api.getOrderDetail({
					no: this.opstion
				}).then(res => {
					this.orderInfo = res.data.data
					if(res.data.data.orderJson.status == 3){
						setTimeout(()=>{
							let query = uni.createSelectorQuery().in(this)
							query.selectAll('.refundAndChange-content,.refundAndChange-title').boundingClientRect((res)=>{
								let temp = 0
								res.forEach((i)=>{
									temp += i.height
								})
								this.refundAndChangeHeight = temp
							}).exec()
						},100)
					}
					this.setCodeSwiper()
					this.showFlag = true
					uni.hideLoading()
				})
			},
			// 返回
			toBack(index) {
				let pages = getCurrentPages()
				let prePages = pages[pages.length - 2].route || ''

				// console.log('prePages',prePages )
				// console.log('pages.length',pages.length)
				// console.log('/(submit)|(payment)/.test(prePages)',/(submit)|(payment)/.test(prePages))

				if (pages.length == 1) {
					uni.switchTab({
						url: '/pages/first/first'
					})
				} else if (/(submit)|(payment)/.test(prePages)) {
					uni.navigateTo({
						url: '/subpages/cinema_ticket/cinema_ticket'
					})
				} else {
					this.$common.toBack(index)
				}
			},
			// 打电话
			phoneCall(mobile) {
				this.$common.makePhoneCall(mobile)
			},
		},
		components: {
			title,
			codeSwiper,
			orderBlock1
		}
	}
</script>
<style>
	page {
		background-color: #f9f9f9;
		font-size: 28rpx;
		color: #323232;
	}
</style>
<style lang="scss" scoped>
	.orderDetail {
		background-color: #F4F4F4;
		.bg-img {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		.block-1 {
			img {
				width: 120rpx;
				height: 142rpx;
			}
		}

		.block-2 {
			position: relative;
			z-index: 1;
			background-color: white;
			padding: 20rpx 32rpx;
			border-radius: 12rpx;

			.img {
				width: 140rpx;
				height: 210rpx;
				border-radius: 12rpx;
				margin-right: 18rpx;
			}

			.twoline {
				text {
					margin-right: 8rpx;

					&:last-of-type {
						display: inline-block;
						background-color: #ECF6F3;
						color: #138E64;
						font-size: 22rpx;
						padding: 3rpx 8rpx;
						border-radius: 6rpx;
					}
				}
			}

			.bottom {
				position: relative;
				height: 94rpx;

				.img2 {
					position: absolute;
					top: 0;
					left: 0;
					height: 100%;
				}

				.con {
					position: relative;
					z-index: 0;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 8rpx 20rpx;
				}
			}
			.refundTip {
				display: flex;
				margin-top: 28rpx;
				.tipTitle {
					border-radius: 6rpx;
					border: 2rpx solid rgba(255,67,69,0.3);
					padding: 8rpx 16rpx;
					
					margin-right: 16rpx;
					
					font-size: 22rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FF4345;
					line-height: 24rpx;
				}
				.tipContent {
					display: flex;
					align-items: center;
					font-size: 22rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FF4345;
					line-height: 24rpx;
				}
			}
		}

		.block-3 {
			position: relative;
			z-index: 1;
			background-color: white;
			padding: 36rpx 20rpx 32rpx 20rpx;
			border-radius: 12rpx;

			.one {
				padding-bottom: 24rpx;
				border-bottom: 2rpx solid #E8EAEE;
			}

			.line {
				margin-top: 24rpx;

				&:first-child {
					margin-top: 30rpx;
				}
			}

			.ques {
				color: #1D1D1F;
			}

			.ans {
				color: #666666;
			}
		}

		.show-code{
			position: relative;
		}

		.code-top{
			background-color: rgba(126,50,219,0.08);
			padding: 12rpx 20rpx;
			border-radius:0 0 12rpx 12rpx;
			
			font-size: 22rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			line-height: 22rpx;
		}
		.refundAndChange {
			background: rgba(221,221,221,0.25);
			border-radius: 8rpx;
			margin: 32rpx 20rpx 0;
			
			overflow: hidden;
			transition: height 0.5s;
			.refundAndChange-title {
				display: flex;
				justify-content: space-between;
				
				padding:20rpx 20rpx 24rpx 20rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FF6010;
				line-height: 24rpx;
			}
			.refundAndChange-content {
				padding:0 20rpx 20rpx 20rpx;
				font-size: 22rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 36rpx;
			}
		}
		.invalid-top{
			color: #999999;
			background-color: #F0F0F0;
		}
		
		.bg-gradual-red {
			color: white;
		}

		.padding {
			padding: 30rpx;
		}

		.grid {
			display: flex;
			flex-wrap: wrap;
		}

		.grid.col-1>view {
			width: 100%;
		}

		.justify-start {
			-webkit-box-pack: start;
			justify-content: flex-start;
		}

		.align-center {
			-webkit-box-align: center;
			align-items: center;
		}

		.flex {
			display: flex;
		}

		.text-lg {
			font-size: 32rpx;
		}

		.margin-left-sm {
			margin-left: 20rpx;
		}

		.margin-top-sm {
			margin-top: 20rpx;
		}

		.text-df {
			font-size: 28rpx;
		}

		.text-white {
			color: #fff;
		}

		.margin-left-xs {
			margin-left: 10rpx;
		}

		.cu-tag.sm {
			font-size: 20rpx;
			padding: 0rpx 12rpx;
			height: 32rpx;
		}

		.cu-tag {
			font-size: 24rpx;
			vertical-align: middle;
			position: relative;
			display: -webkit-inline-box;
			display: -webkit-inline-flex;
			display: inline-flex;
			-webkit-box-align: center;
			align-items: center;
			-webkit-box-pack: center;
			justify-content: center;
			box-sizing: border-box;
			padding: 0rpx 16rpx;
			height: 48rpx;
			font-family: Helvetica Neue, Helvetica, sans-serif;
			white-space: nowrap;
		}

		.radius {
			border-radius: 6rpx;
		}

		.cu-tag.radius[class*=line]:after {
			border-radius: 12rpx;
		}

		.cu-tag[class*=line-]:after {
			border-radius: 0;
		}

		.cu-tag[class*=line-]:after {
			content: " ";
			width: 200%;
			height: 200%;
			position: absolute;
			top: 0;
			left: 0;
			border: 1rpx solid;
			transform: scale(.5);
			transform-origin: 0 0;
			box-sizing: border-box;
			border-radius: inherit;
			z-index: 1;
			pointer-events: none;
		}

		.mov-status {
			position: absolute;
			top: 30rpx;
			right: 20rpx;
			z-index: 999;
		}

		// 出票中
		.bg-white {
			background-color: #fff;
			color: #666;
		}

		.padding {
			padding: 30rpx;
		}

		.grid {
			display: flex;
			flex-wrap: wrap;
		}

		.margin-tb-sm {
			margin-top: 20rpx;
			margin-bottom: 20rpx;
		}

		.text-gray {
			color: #aaa;
		}

		.loading-gif {
			width: 200rpx;
			height: 200rpx;
		}

		.text-center {
			text-align: center;
		}

		image {
			max-width: 100%;
			display: inline-block;
			position: relative;
			z-index: 0;
		}

		// 影院
		// 影院头部
		.buymovie-top {
			margin: 16rpx 0;
			background-color: white;
			display: flex;
			padding: 20rpx 30rpx;
			align-items: center;

			.title-info-box {
				width: 600rpx;
				min-height: 94rpx;

				.cinema {
					color: #333;
					font-size: 32rpx;
					width: 600rpx;
				}

				.cinema_hui {
					color: #AAA;
					font-size: 24rpx;
					margin-top: 20rpx;
					width: 600rpx;
				}
			}

			.image-box {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				image {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
				}

				text {
					font-size: 60rpx;
					color: #B9B9B9;
				}
			}
		}

		// 实付金额
		.sfje {
			position: relative;
			z-index: 1;

			.padding-tb-sm {
				padding-top: 20rpx;
				padding-bottom: 20rpx;
			}

			.padding-lr {
				padding-left: 30rpx;
				padding-right: 30rpx;
			}

			.text-black {
				color: #333;
			}

			.text-lg {
				font-size: 32rpx;
			}

			.solid-bottom:after {
				border-bottom: 1rpx solid rgba(0, 0, 0, .1);
			}

			.text-price:before {
				content: "¥";
				font-size: 80%;
				margin-right: 4rpx;
			}

			.fr {
				float: right;
			}

			.fl {
				float: left;
			}

			.grid {
				display: flex;
				flex-wrap: wrap;
			}

			.text-sm {
				font-size: 24rpx;
			}
		}

		.bg-white {
			background-color: #fff;
			color: #666;
		}

		.padding-tb-sm {
			padding-top: 20rpx;
			padding-bottom: 20rpx;
		}

		.padding-lr {
			padding-left: 30rpx;
			padding-right: 30rpx;
		}

		.margin-top-sm {
			margin-top: 20rpx;
		}

		.flex {
			display: flex;
		}

		.text-sm {
			font-size: 24rpx;
		}

		.justify-center {
			-webkit-box-pack: center;
			justify-content: center;
		}

		.align-center {
			-webkit-box-align: center;
			align-items: center;
		}

		.text-red-new {
			color: #f1255d;
		}

		.flex-twice {
			-webkit-box-flex: 2;
			flex: 2;
		}

		.padding-bottom-xs {
			padding-bottom: 10rpx;
		}

		.text-xsl {
			font-size: 120rpx;
		}

		.empty {
			background-color: white;
			height: 400rpx;
		}

		.margin-top-xs {
			margin-top: 10rpx;
		}

		.header-info {
			position: relative;
		}
	}
	.discount-box {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.code-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		// width: 100%;
		margin: 20rpx;
		.code {
			width: 100%;
		}
	}
</style>
